<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Xquared example - Extension point</title>
	<link rel="stylesheet" type="text/css" href="../stylesheets/xq_ui.css" />
	<script type="text/javascript" src="../javascripts/XQuared.js?load_others=1"></script>
	<script type="text/javascript" src="../javascripts/plugin/LinkToImagePlugin.js"></script>
	<script type="text/javascript">//<![CDATA[
		var xed;
	
		window.onload = function() {
			xed = new xq.Editor("xqEditor");
			xed.config.changeCursorOnLink = true;
			
			xed.addPlugin('LinkToImage');
			
			var contextMenuHandler = function(editor, element, x, y) {
				if(element.nodeName == "IMG") {
					editor.showContextMenu([
						{
							title: xed._('Link to image'),
							className: 'imgLinkEdit',
							handler: editor.linkToImage.execute.bind(editor)
						},
						{
							title: '----'
						},
						{
							title: xed._('Make text to flow around image'), 
							className: 'imgDecoration'
						},
						{
							title: xed._('No flow'), 
							className: 'imgFloatBlock', 
							handler: editor.makeImageAlignToDefault.bind(editor)
						},
						{
							title: xed._('Place image left'), 
							className: 'imgFloatLeft', 
							handler: editor.makeImageAlignToLeft.bind(editor)
						},
						{
							title: xed._('Place image right'), 
							className: 'imgFloatRight', 
							handler: editor.makeImageAlignToRight.bind(editor)
						}
					], x, y);
					
					return true;
				}
			}
			
			xed.addContextMenuHandler('imageMenu', contextMenuHandler);
			
			xed.setEditMode('wysiwyg');
			xed.setWidth("100%");
		}
	//]]></script>
</head>

<body>
	<textarea id="xqEditor">&lt;img src="http://xquared.springnote.com/pages/451172/attachments/199221" /&gt;&lt;p&gt;Hello World&lt;/p&gt;</textarea>
</body>
</html>
